<template>
    <div class="box-board">
        <div class="box">
            <h1 class="title">订单数据</h1>
            <div class="box-data">
                <div class="item">
                    <p class="p1 green-dark">{{dataA}}</p>
                    <p class="p2">今日订单数</p>
                </div>
                <div class="item">
                    <p class="p1 red">{{dataB}}</p>
                    <p class="p2"> 7天订单数</p>
                </div>
                <div class="item">
                    <p class="p1 brown">{{dataC}}</p>
                    <p class="p2">30天订单数</p>
                </div>
                <div class="item blue">
                    <p class="p1 blue">{{total}}</p>
                    <p class="p2">总订单数</p>
                </div>
            </div>
        </div>
        <div class="box">
            <h1 class="title">最近订单</h1>
            <el-table :data="tableData" stripe style="width: 100%;text-align:left;cursor:pointer;">
                <el-table-column prop="order_id" label="订单号"></el-table-column>
                <el-table-column prop="create_time" label="下单日期"></el-table-column>
                <el-table-column prop="book_time" label="预约日期"></el-table-column>
                <el-table-column prop="user_name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="add_from" label="起始地" width="200"></el-table-column>
                <el-table-column prop="add_to" label="目的地" width="200"></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button  @click='toDetail(scope.$index, scope.row)' size="small">查看</el-button>                       
                    </template>
                </el-table-column>
            </el-table>
        </div>
         <el-dialog title="订单详情" :visible.sync="showPop" width="600px">
            <div class="row-dialog">
                <span class="label">订单编号</span>
                <span class="txt">{{detail.order_id}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">下单日期</span>
                <span class="txt">{{detail.create_time}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">预约日期</span>
                <span class="txt">{{detail.book_time}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">需要人力</span>
                <span class="txt">{{detail.man_qty}}人</span>
            </div>
            <div class="row-dialog">
                <span class="label">起始地</span>
                <span class="txt">{{detail.add_from}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">目的地</span>
                <span class="txt">{{detail.add_to}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">姓名</span>
                <span class="txt">{{detail.user_name}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">电话</span>
                <span class="txt">{{detail.phone}}</span>
            </div>
            <div class="row-dialog">
                <span class="label">车型</span>
                <span class="txt">{{detail.car_name}}</span>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dataA: 0,
      dataB: 0,
      dataC: 0,
      total: 0,
      detail:{},
      showPop:false
    };
  },
  methods: {
    toDetail(index, row) {
        this.showPop = true;
        this.detail = row;
    },
    getOrderList() {
      let self = this;
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      fetch("/api/admin/orderlist?mid=" + mid + "&pos=1")
        .then(response => response.json())
        .then(data => {
          console.log(JSON.stringify(data));
          self.tableData = data.data;
        })
        .catch(err => console.log("Oh, error", err));
    },
    getOrderData() {
      let self = this;
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      fetch("/api/admin/orderData?mid=" + mid)
        .then(response => response.json())
        .then(data => {
          self.dataA = data.data.ret1;
          self.dataB = data.data.ret2;
          self.dataC = data.data.ret3;
          self.total = data.data.total;
        })
        .catch(err => console.log("Oh, error", err));
    }
  },
  created() {
    this.getOrderList();
    this.getOrderData();
  },
  components: {}
};
</script>

<style lang='scss' scoped>
@import "../assets/scss/common.scss";
.box-board {
  width: 100%;
}
.box {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 1px 2px #ddd;
  border-radius: 5px;
  padding: 30px 20px 20px 20px;
  margin-bottom: 30px;
  .title {
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .box-data {
    display: flex;
    justify-content: space-between;
  }
  .item {
    .p1 {
      margin-bottom: 10px;
      font-size: 30px;
      font-weight: bold;
    }
    .p2 {
      color: #333;
    }
  }
}
  .row-dialog{
      display: flex;
      font-size: 14px;
      margin-bottom: 20px;
      .label{
          width: 70px;
          color: #999;
          margin-right: 20px;
          text-align: right;
      }
      .txt{
          flex:1; 
          text-align: left;
      }
  }
</style>
